<template>
  <a-layout class="layout">
    <a-layout-sider class="sider">
      <my-list />
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <van-field label="你的词语是：" v-model="state.word" readonly />
      </a-layout-header>
      <a-layout-content>
        <van-field label="接龙历史：" v-model="state.history" readonly />
        <div style="background-color: #f5f5f5;padding: 10px;display: flex;justify-content: center;align-items: center;">
        <my-canvas></my-canvas></div>
        <van-button round block type="primary" @click="deleteDraw" style="margin: 16px;">清空图片</van-button>
        <van-button round block type="primary" @click="sendDraw" style="margin: 16px;">提交图片</van-button>
        <van-form @submit="guessWord">
        <van-field v-model="state.newword" name="这副图片是" label="这副图片是" placeholder="请输入"
            :rules="[{ required: true, message: '请填写您猜到的词' }]"  style="margin: 16px;"/>
            <van-button round block type="primary" native-type="submit" style="margin: 16px;">猜词</van-button>
          </van-form>
      </a-layout-content>
      <a-layout-footer>
        </a-layout-footer>
        
    </a-layout>
  </a-layout>
</template>
  
<script>
import MyCanvas from './my-canvas.vue';
import MyList from './my-list.vue'
import socket from '@/socket';
import store from '@/store';
import { defineComponent, reactive,computed} from 'vue';
export default defineComponent({
  name: 'App',
  components: {
    'my-canvas': MyCanvas,
    "my-list": MyList,
  },
  setup() {
    const state = reactive({
      word: computed(() => store.state.word),
      newword:'',
      history: computed(() => store.state.history),
      
        });


    const sendDraw = () => {
      socket.emit('send_draw',store.state.lines,store.state.room.roomnum,store.state.wordowner)
      console.log(store.state.wordowner)
    };

    const guessWord = () => {
      socket.emit('guess_word',state.newword,store.state.room.roomnum,store.state.drawowner)
        store.state.turnnum++;
    };
    const deleteDraw = () => {
        store.state.lines = [];
    };
    return {
      state,
      sendDraw,
      guessWord,
      deleteDraw
    }
  }
})
</script>
  
<style>
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.layout {
  background: #fff;
}

.sider {
  background: #fff;
  width: 200px;
  min-height: 800px;
}

.header {
  background: #fff;
  min-height: 100px;
}

.content {
  background: #fff;
}

.footer {
  background: #fff;
  min-height: 100px;
}

.input {
  margin-right: 10px;
  width: 20px;
}

.button {
  margin-top: 10px;
  width: 100px;
}</style>